<template>
	<div>
		<van-row style="margin-top: 1.25rem;">
			<van-col span="2">
				<van-icon name="arrow-left" size="30" style="margin-left: 0.625rem;line-height: 2.5rem;"
					@click="router" />
			</van-col>
			<van-col span="20" class="setting">
				<h5>设置</h5>
			</van-col>
			<van-col span="2"></van-col>
		</van-row>
		<div class="login">
			<van-row>
				<van-col span="6">
					<van-image round width="90" height="90" lazy-load :src="user.headerImg" />
				</van-col>
				<van-col span="13" offset="2">
					<van-row>
						<van-col span="24">
							<h3>{{user.nickName}}</h3>
						</van-col>
						<van-col span="24">
							<p class="title">{{user.createTime}}</p>
						</van-col>
					</van-row>
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="36" class="name_icon" />
				</van-col>
			</van-row>
			<hr style="margin-top: 0.4375rem;" />
			<van-row>
				<van-col span="8" style="line-height: 3.125rem;font-size: 1.25rem;" offset="1">我的收货地址</van-col>
				<van-col span="2" offset="12">
					<van-icon name="arrow" size="30" style="line-height: 3.125rem;" />
				</van-col>
			</van-row>
		</div>
		<div class="login_tow">
			<van-row style="line-height: 3.4375rem;">
				<van-col span="20" offset="1" class="login_tow_text">
					账号安全
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" />
				</van-col>
			</van-row>
			<hr />
			<van-row style="line-height: 2.5rem;">
				<van-col span="20" offset="1" class="login_tow_text">
					支付
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" style="margin-top: 0.3125rem;" />
				</van-col>
			</van-row>
		</div>
		<div class="login_three">
			<van-row style="line-height: 3.4375rem;">
				<van-col span="20" offset="1" class="login_tow_text">
					消息通知
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" />
				</van-col>
			</van-row>
			<hr />
			<van-row style="line-height: 3.4375rem">
				<van-col span="20" offset="1" class="login_tow_text">
					隐私
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" style="margin-top: 0.3125rem;" />
				</van-col>
			</van-row>
			<hr />
			<van-row style="line-height: 3.4375rem">
				<van-col span="20" offset="1" class="login_tow_text">
					通用
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" style="margin-top: 0.3125rem;" />
				</van-col>
			</van-row>
		</div>
		<div class="login_tow">
			<van-row style="line-height: 3.4375rem;">
				<van-col span="20" offset="1" class="login_tow_text">
					帮助与反馈
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" />
				</van-col>
			</van-row>
			<hr />
			<van-row style="line-height: 2.5rem;">
				<van-col span="20" offset="1" class="login_tow_text">
					关于果粉
				</van-col>
				<van-col span="2">
					<van-icon name="arrow" size="28" style="margin-top: 0.3125rem;" />
				</van-col>
			</van-row>
		</div>
		<button type="button" class="button" @click="">切换账号</button>
		<button type="button" class="button" @click="quit">退出登录</button>
	</div>
</template>

<script>
	import {
		Notify
	} from 'vant';
	export default {
		components: {
			[Notify.Component.name]: Notify.Component,
		},
		data() {
			return {
				user:{}
			}
		},
		created(){
			this.user = JSON.parse(localStorage.getItem('user'))
		},
		methods: {
			quit() {
				localStorage.clear("user");
				if (JSON.parse(localStorage.getItem('user')) != '') {
					this.$router.push('/UserLogin')
				} else {
					Notify('发生了不得了的事情呢!');
				}
			},
			router() {
				this.$router.push('/UserMine')
			}
		}
	}
</script>

<style scoped="scoped">
	.setting {}

	h5 {
		line-height: 2.5rem;
		text-align: center;
		font-size: 1.4375rem;
	}

	.login {
		width: 95%;
		height: 10.5rem;
		margin-top: 1.25rem;
		margin-left: 3%;
		border-radius: 0.3125rem;
		box-shadow: 0 0 5px #565;
		color: #5E5E5E;
	}

	.van-image {
		margin-top: 0.625rem;
		margin-left: 1rem;
	}

	h3 {
		font-size: 1.55rem;
		margin-top: 1.45rem;
	}

	.title {
		margin-top: 0.7rem;
	}

	.name_icon {

		margin-top: 2.1875rem;
	}

	.login_tow {
		width: 95%;
		height: 6.5rem;
		margin-top: 1.25rem;
		margin-left: 3%;
		border-radius: 0.3125rem;
		box-shadow: 0 0 5px #565;
		color: #5E5E5E;
	}

	.login_tow_text {
		font-size: 1.25rem;
	}

	.login_three {
		width: 95%;
		height: 10.5rem;
		margin-top: 1.25rem;
		margin-left: 3%;
		border-radius: 0.3125rem;
		box-shadow: 0 0 5px #565;
		color: #5E5E5E;
	}

	.button {
		width: 95%;
		margin-left: 3%;
		height: 50px;
		background-color: #000000;
		color: #B8B8B8;
		text-align: center;
		line-height: 50px;
		border-radius: 5px;
		margin-top: 20px;
		font-size: 20px;
	}
</style>
